<template>
  <dk-diy-page :diy-data="diyData">
    <template #default="{ item }">
      <dk-diy-components :item="item" />
    </template>
  </dk-diy-page>
  <dk-tabbar page-path="pages/tabbar/my/index" />
</template>

<script>
import { getConfig } from '~/api/config'

export default {
  data() {
    return {
      userData: null,
      diyData: null,
      loading: true,
    }
  },
  onLoad() {
    // this.userLogin()
    this.init()
  },
  methods: {
    init() {
      getConfig('my_page').then((res) => {
        this.diyData = res.data
        this.loading = false
      })
    },
  },
}
</script>

<style>
.top-image {
  position: fixed; /* 或 absolute，取决于布局需求 */
  top: 0;
  left: 0;
  width: 100%;
  height: 200px; /* 设置图片或容器的高度 */
  z-index: 1; /* 设置一个较低的z-index值，以便被下面的内容覆盖 */
}

/* 下面滚动内容的容器样式 */
.scroll-content {
  position: relative; /* 或默认的static，取决于布局需求 */
  margin-top: 200px; /* 确保内容从图片下方开始 */
  z-index: 2; /* 设置一个比图片更高的z-index值，使其覆盖图片 */
  overflow-y: auto; /* 启用垂直滚动 */
}
</style>
